<script>
import request from "../../../utils/request"

export default {
  name: "agreement",
  methods: {
    open() {
      return new Promise((resolve, reject) => {
        this.$refs.popup.open()
        this.resolve = resolve
        this.reject = reject
      })
    },
    close() {
      this.$refs.popup.close()
    },
  },
  data() {
    return {
      content: "",
      resolve: null,
      reject: null,
    }
  },
  created() {
    //获取协议内容
    request({
      url: "sysPam/getSysParam",
      data: {
        pamCode: "courseTakeOrderAgreement",
      },
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.content = data.pamValue
    })
  },
  props: {
    hasAgreement: Boolean,
  },
  emits: ["update:hasAgreement"],
}
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="
      (val) => {
        if (!val.show) {
          if (!hasAgreement) {
            reject()
          }
        }
      }
    "
  >
    <view class="container">
      <view class="header">
        <view class="placeholder"></view>
        <view class="title">用户服务协议</view>
        <view
          class="agree-btn"
          @click="
            () => {
              $emit('update:hasAgreement', true)
              resolve()
              close()
            }
          "
          >同意</view
        >
      </view>
      <view class="content-container">
        <!--        <view v-html="content" class="content"></view>-->
        <rich-text :nodes="content" class="content"></rich-text>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.container {
  height: 70vh;
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  .header {
    height: 130rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    justify-content: space-between;
    .placeholder {
      width: 120rpx;
    }
    .title {
      font-size: 36rpx;
      color: var(--text-color);
    }
    .agree-btn {
      width: 120rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--theme-color);
      color: var(--text-color-white);
      font-size: 30rpx;
      border-radius: 35rpx;
    }
  }
  .content-container {
    height: calc(70vh - 130rpx);
    overflow: auto;
    padding: 0 30rpx;
    .content {
      width: 100%;
      padding: {
        top: 30rpx;
        bottom: calc(30rpx + env(safe-area-inset-bottom));
      }
      word-break: break-all;
    }
  }
}
</style>
